<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>退出登录页面</title>
		<link rel="stylesheet" href="__STATIC__/css/bootstrap.min.css" />
	<link rel="stylesheet" href="__STATIC__/css/header.css" />
	<script src="__STATIC__/js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="__STATIC__/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="__STATIC__/js/metisMenu.min.js" type="text/javascript" charset="UTF-8"></script>
	<style type="text/css">
		.container{
					width: 60%;
					height: 100%;
					top: 25%;
					position: fixed;
					size: a3;
					}
		.col-md-9{
			width: 100%;
			height: 100%;
			top:5%;
			left: 24%;
			right: 100%;
			position: absolute;
		}
	</style>
	</head>
	<body>
	<div class="header">     <div class="header-logo-bar">         <div class="header-logo-msg">             <!--<div class="logo">              </div>             <div class="logo">              </div>-->         </div>         <div class="header-personal-message">             <span><a href="#"></a></span>             <span><a href="#"></a></span>             <div class="profile-photo">              </div>         </div>     </div>     <div class="nav-bar">         <ul class="nav">             <a href="{:url('index/index/home')}">首页</a>         </ul>         <ul>             <a href="#">前端</a>             <ul class="plat">                 <li><a href="{:url('index/index/course')}">HTML</a></li>                 <li><a href="#">CSS</a></li>                 <li><a href="#">Javascript</a></li>             </ul>         </ul>         <ul>             <a href="#">后端</a>             <ul class="plat">                 <li><a href="#">Java</a></li>                 <li><a href="#">c++</a></li>                 <li><a href="#">PHP</a></li>                 <li><a href="#">python</a></li>             </ul>         </ul>         <ul>             <a href="#">移动</a>             <ul class="plat">                 <li><a href="#">ios</a></li>                 <li><a href="#">Android</a></li>             </ul>         </ul>         <ul>             <a href="#">数据库</a>             <ul class="plat">                 <li><a href="#">MySQL</a></li>                 <li><a href="#">SQLServer</a></li>                 <li><a href="#">Oracle</a></li>             </ul>         </ul>     </div> </div> <div class="personal-msg">     <div class="personal-msg-bar">         <div class="personal-msg-profile-photo"></div>         <div class="personal-msg-username"><span>username</span></div>     </div>     <div class="personal-msg-order">         <div class="personal-msg-btn"><a href="#">我的课程</a></div>         <div class="personal-msg-btn"><a href="#">个人信息</a></div>     </div>     <div class="personal-msg-order">         <div class="personal-msg-btn"><a href="#">最近浏览</a></div>         <div class="personal-msg-btn"><a href="#">我的设置</a></div>     </div> </div>
	<div id="content-container" class="container">
        <div class="row">
            <div class="col-md-3">
                <div class="sidenav">
                    <ul class="list-group">
                        <h2>设置</h2>
                        <li class="list-group-item">
                            <a href="settings.html#news">个人信息</a>
                        </li>
                        <li class="list-group-item ">
                            <a href="personal.html">账号绑定</a>
                        </li>
                        <li class="list-group-item ">
                            <a href="caozuojiankong.html">操作记录</a>
                        </li>
                        <li class="list-group-item ">
                            <a href="#tuichu"class="header-nav-item"  data-toggle="modal" onclick="login();"  style="margin-right:0px;font-size:14px;">退出登录</a>
                        </li>
                    </ul>
                </div>
            </div>
           </div>
          </div>

	   <div class="modal fade" id="tuichu" tabindex="-1" role="dialog"  style="position:fixed; top:30%;">
		    <div class="modal-dialog" role="document">
		        <div class="modal-content">

		            <div class="modal-header">
		                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
		                    <span aria-hidden="true" style="font-size:18px;">×</span>
		                </button>
		                <h4>退出登录</h4>
		            </div>

		            <div class="modal-body">
		               	<form id="loginForm" class="form-horizontal" style="padding: 0px 20px;">
		                      <div class="form-group">
		                        <span style="color: #F01414;"> 是否退出登录？</span>
		                      </div>
		                      <div class="form-group">
		                      	<button>确认</button>
		                      	<button>取消</button>
		                      </div>
		                  </form>

		            </div>

		        </div>
		    </div>
		</div>
	<script type="text/javascript">
    $(document).ready(function(){
        $("div.profile-photo").mouseenter(function(){
            $("div.personal-msg").show(500);
        });
        $("div.personal-msg").mouseleave(function(){
            $("div.personal-msg").hide(500);
        });
        $("div.nav-bar").mouseenter(function(){
            $("div.personal-msg").hide(500);
        });
    });
</script>
</body>
</html>
